<template>
    <div class="mk-cus-ddl" :style="{width:width+'px'}" @click.stop="()=>{return false;}">
        <span class="cur"  @click="onCurClick" v-if="!multiple">{{curText?curText:placeholder}} <i class="clear-btn" v-if="value&&showclearbtn" @click="handleClear"></i></span>
        <span class="cur"  @click="onCurClick" :class="{'no-cur-bg':!!value}" v-else>{{value?value:placeholder}} <i class="clear-btn" v-if="value" @click="handleClear"></i></span>
        <div class="global-ddl sub-dd-block" :class="{'toggle-open':toggle}" v-if="!multiple">
            <!-- <el-scrollbar class="scrollMenuBox" :class="{'has-m-list':tlist&&tlist.length>0}">
                <ul class="sub-ddls"v-if="tlist&&tlist.length>0">
                    <li v-for="(item,idx) in tlist" :key="idx" @click="chooseSubItem(item)" v-if="item.title!='全部'||showAll"><a :class="{'active':subvalue==item.value}">{{item.title}}</a></li>
                </ul>
                <ul class="sub-ddls">
                    <li v-for="(item,idx) in list" :key="idx" @click="chooseItem(item)" v-if="item.title!='全部'||showAll"><a :class="{'active':value==item.value}">{{item.title}}</a></li>
                </ul>
            </el-scrollbar> -->
            <div class="d-b-wrap" :style="'max-height:'+maxh+'px;'" :class="{'has-m-list':tlist&&tlist.length>0}">
                <ul class="sub-ddls"v-if="tlist&&tlist.length>0">
                    <li v-for="(item,idx) in tlist" :key="idx" @click.stop="chooseSubItem(item)" v-if="item.title!='全部'||showAll"><a :title="item.title" :class="{'active':subvalue==item.value}">{{item.title}}</a></li>
                </ul>
                <ul class="sub-ddls">
                    <li v-for="(item,idx) in list" :key="idx" @click.stop="chooseItem(item)" v-if="item.title!='全部'||showAll"><a  :title="item.title" :class="{'active':value==item.value}">{{item.title}}</a></li>
                </ul>
            </div>
        </div>
        <div class="global-ddl sub-dd-block multiple"  :class="{'toggle-open':toggle}" v-else>
            <div class="wrap">
                <div class="max-tit">最多可选{{maxlength}}个 <a class="close-win-box" @click="handleXclose"></a> </div>
                <ul class="sub-ddls">
                    <li v-for="(item,idx) in list" :key="idx" @click.stop="chooseItem(item)" v-if="item.title!='全部'"><a  :title="item.title" :class="{'active':item.selected}">{{item.title}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            curText:'',
            toggle:false
        }
    },
    props:{
        showclearbtn:{
            type:Boolean,
            default:false
        },
        placeholder:{
            type:String,
            default:'请选择'
        },
        width:{
            type:Number,
            default:150
        },
        list:{
            type:Array,
            default:null
        },
        tlist:{
            type:Array,
            default:null
        },
        value:{
            type:String,
            default:''
        },
        subvalue:{
            type:String,
            default:''
        },
        multiple:{
            type:Boolean,
            default:false
        },
        maxlength:{
            type:Number,
            default:0
        },
        showAll:{
            type:Boolean,
            default:false
        },
        maxh:{
            type:Number,
            default:455
        }
    },
    watch:{
        value(newval){
            // if(newval){
                if(!this.multiple){
                    let data=this.list.filter(r=>{
                        return r.value==newval;
                    });
                    if(data.length>0){
                        this.curText=data[0].title;
                    }
                }else{
                    let that=this;
                    if(this.value)
                    {
                        let values=this.value.split(',');
                        values.map(str=>{
                            that.list.map(item=>{
                                if(item.value==str){
                                    item.selected=true;
                                }
                            })
                        })
                    }
                }
            // }
        },
        list(newval){
            if(this.list&&this.list.length>0)
            {
                let newval=this.value;
                if(!this.multiple){
                    let data=this.list.filter(r=>{
                        return r.value==newval;
                    });
                    if(data.length>0){
                        this.curText=data[0].title;
                    }
                }else{
                    let that=this;
                    if(this.value)
                    {
                        let values=this.value.split(',');
                        values.map(str=>{
                            that.list.map(item=>{
                                if(item.value==str){
                                    item.selected=true;
                                }
                            })
                        })
                    }
                }
            }
        }
    },
    methods:{
        handleXclose(){
            $('.global-ddl').removeClass('toggle-open');
        },
        onCurClick(e){
            // debugger
            e.stopPropagation();
            // let that=this;
            // if(that.toggle==true)
            // {
            //     that.toggle=false;
            //     // setTimeout(()=>{
            //     //     that.toggle=!that.toggle;
            //     // },100)
            // }else{
            //     that.toggle=!that.toggle;
            // }
            if($(e.target).siblings('.sub-dd-block').hasClass('toggle-open'))
                $(e.target).siblings('.sub-dd-block').removeClass('toggle-open')
            else
            {
                $('.global-ddl').removeClass('toggle-open');
                $(e.target).siblings('.sub-dd-block').addClass('toggle-open')
            }
        },
        handleClear(){
            this.curText=''
            if(this.multiple){
                this.list.map(item=>{
                    item.selected=false;
                })
                this.$emit('update:value','')
                this.$emit('change','')
            }else{
                this.$emit('update:value','')
                this.$emit('change','')
            }
        },
        chooseSubItem(item){
            if(this.multiple){
                let selected=item.selected==undefined?true:!item.selected;

                let selectData=this.tlist.filter(r=>{
                    return r.selected==true;
                })
                if(item.selected!=true){
                    if(selectData.length==this.maxlength){
                        this.$amessage.error('最多可选'+this.maxlength+'个')
                        return;
                    }
                }
                item.selected=selected;
                this.$forceUpdate();

                selectData=this.tlist.filter(r=>{
                    return r.selected==true;
                })

                let values=selectData.map(item=>{
                    return item.value;
                })

                this.$emit('update:subvalue',values.join(','))
                this.$emit('change',item.value)
            }else{
                this.toggle=false;
                this.$emit('update:subvalue',item.value)
                this.$emit('change',item.value)

                this.handleXclose();
            }
        },
        chooseItem(item){
            if(this.multiple){
                let selected=item.selected==undefined?true:!item.selected;

                let selectData=this.list.filter(r=>{
                    return r.selected==true;
                })
                if(item.selected!=true){
                    if(selectData.length==this.maxlength){
                        this.$amessage.error('最多可选'+this.maxlength+'个')
                        return;
                    }
                }
                item.selected=selected;
                this.$forceUpdate();

                selectData=this.list.filter(r=>{
                    return r.selected==true;
                })

                let values=selectData.map(item=>{
                    return item.value;
                })

                this.$emit('update:value',values.join(','))
                this.$emit('change',item.value)
            }else{
                this.toggle=false;
                this.curText=item.title;
                this.$emit('update:value',item.value)
                this.$emit('change',item.value)

                this.handleXclose();
            }
        }
    },
    mounted(){
        if(this.list&&this.list.length>0)
        {
            let newval=this.value;
            if(!this.multiple){
                let data=this.list.filter(r=>{
                    return r.value==newval;
                });
                if(data.length>0){
                    this.curText=data[0].title;
                }
            }else{
                let that=this;
                if(this.value)
                {
                    let values=this.value.split(',');
                    values.map(str=>{
                        that.list.map(item=>{
                            if(item.value==str){
                                item.selected=true;
                            }
                        })
                    })
                }
            }
        }
        let that=this;
        document.body.addEventListener('click',(e)=>{
            $('.sub-dd-block').removeClass('toggle-open');
        })
    }
}
</script>
<style lang="less">
.scrollMenuBox {
    height:400px;
    border-radius: 16px;
    .el-scrollbar__wrap{
        overflow-x: hidden;
    }
}
.mk-cus-ddl {
      cursor: pointer;
      position: relative;
      height:40px;
      &:hover {
        .cur{
            border:1px solid #11CCB1;
        }
        // .sub-dd-block {
        //   display: inline-block;
        //   z-index: 111;
        // }
      }
      .cur {
        border:1px solid transparent;
        line-height: 40px;
        height:40px;
        border-radius: 8px;
        // min-width: 108px;
        width:100%;
        // text-align: center;
        display: inline-block;
        // padding: 0px 30px;
        padding: 0px 11px 0px 16px;
        font-size: 14px;
        font-weight: 500;
        background-image: url('../assets/pro/common_ddl_arrow.svg');
        background-repeat: no-repeat;
        background-position: 94% center;
        background-size: 14px 14px;
        white-space: nowrap;
        overflow: hidden;
        transition:.1s all linear;
        text-overflow: ellipsis;
        padding-right:38px;
        border-color:#23232A;
        color:#fff;
        position: relative;
        .clear-btn{
            background:url('../assets/pro/cancel_search.svg');
            width:20px;height:20px;
            position: absolute;
            top:10px;
            right:10px;
            opacity:.8;
            &:hover{
                opacity:1;
            }
        }
        &.has,&.no-cur-bg{
            background-image: none;
        }
      }
      .sub-dd-block {
        position: absolute;
        top: 40px;
        left: 0px;
        display: none;
        padding-top: 10px;
        cursor:default;
        width:100%;
        min-width: 150px;
        animation: hdpanel .3s ease forwards;
        .d-b-wrap{
            max-height: 455px;
            overflow-y: auto;
            padding: 8px 9px;
            background: #29272f;
            border-radius: 16px;
            .sub-ddls{
                padding:0px;
            }
        }
        .sub-ddls {
          background: #29272f;
          border-radius: 16px;
          padding: 8px 9px;
          font-size: 16px;
          padding-bottom:10px;
            display: flex;
            flex-direction: column;
            grid-gap:10px;
           &::-webkit-scrollbar{
                width: 6px;
                height: 8px;
                background-color: transparent;
            }
            /*滚动条的轨道*/
            &::-webkit-scrollbar-track{
                background-color: transparent;
            }
            /*滚动条的滑块按钮*/
            &::-webkit-scrollbar-thumb{
                border-radius:6px;
                background-color: #4E4E57;
            }
            /*滚动条的上下两端的按钮*/
            &::-webkit-scrollbar-button{
                height: 0;
            }
            
            /* 两个滚动条的交汇处 */
            &::-webkit-scrollbar-corner{
                background-color: transparent;
            }
            li {
            line-height: 43px;
            overflow: hidden;
            border-radius: 8px;
            a {
              display: block;
              user-select: none;
              width: 100%;
              font-size:14px;
              height: 100%;
              color:#fff;
              white-space: nowrap;
              text-align: center;
              padding:0px 10px;
              padding-right:20px;
              overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition:.2s all linear;
              &:hover {
                background-color: #15151A;
              }
              &.active{
                // background:#15151A;
                color:#11CCB1;
                background-image:url('../assets/pro/ddl_item_active.svg');
                background-repeat:no-repeat;
                background-position:98% center;
                // display:flex;
                // align-items: center;
                // justify-content: center;
                // position: relative;
                // &:after{
                //     content:'';
                //     width:16px;height:16px;
                //     background:url('../assets/pro/ddl_item_active.svg') no-repeat;
                //     // margin-left:9px;
                //     position: absolute;
                //     right:9px;
                // }
              }
            }
          }
        }
        
        &.multiple{
            width:1131px;
            .wrap{
                background: #29272f;
                border-radius: 16px;
                padding:22px 31px;
                // padding-right:6px;
            }
            .max-tit{
                color:#969696;
                font-size:12px;
                line-height:17px;
                margin-bottom:19px;
                position: relative;
                line-height:20px;
                .close-win-box{
                    width: 20px;
                    height: 20px;
                    background: url('../assets/pro/close_modal_page.svg') no-repeat;
                    background-size: cover;
                    margin-left: 20px;
                    position: absolute;
                    right: 0px;
                    top:0px;
                    transition:.1s all linear;
                    &:hover{
                        transform: rotate(180deg);
                    }
                }
            }
            .sub-ddls{
                display: flex;
                flex-wrap: wrap;
                padding:0px;
                flex-direction:row;
                li{
                    // margin-right:24px;
                    line-height:30px;
                    border-radius:15px;
                    width:calc((100% - 100px) / 11);
                    // margin-bottom:15px;
                    background:#37363E;
                    // &:nth-child(10n){
                    //     margin-right:0px;
                    // }
                    .active{
                        background:#11CCB1;
                        color:#fff;
                    }
                }
            }
        }

        &.toggle-open{
            display: inline-block;
            z-index: 111;
        }
      }
    }
.has-m-list{
    .sub-ddls{
        &:first-child{
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
            padding-bottom:0px;
            &:after{
                content:'';
                height:1px;
                background:#414141;
                width:50px;
                display: block;
                margin:10px auto;
            }
        }
        &:last-child{
            border-top-left-radius:0;
            border-top-right-radius:0;
            padding-top:0px;
        }
    }
}
</style>